<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadImgUrl"
      :headers="headers"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="quillImgSuccess"
      :on-error="uploadError"
      :file-list="fileList2"
      name="file"
      multiple
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-button type="primary" @click="test">test</el-button>
    <p>
      <img width="50" height="50" :src="ImgUrl" alt>
    </p>
    <hr>

    <div>
      <el-button type="primary" @click="testDeleteAjax">delete</el-button>
      {{ text }}
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import request from '@/utils/request'

import {
  testDeleteAjax
} from '@/api/tools/test.js'
export default {
  name: 'PictureUpload',
  data() {
    return {
      fileList2: [],
      ImgUrl: process.env.VUE_APP_BASE_API + '/pic/get?id=9', // 上传的图片服务器地址
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/pic/upload', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      text: '发送'
    }
  },
  methods: {
    test() {
      request({
        url: '/pic/get?id=9',
        method: 'get'
      }).then((res) => {
        debugger
      })
    },
    handleRemove(file, fileList) {
      debugger
      console.log(file, fileList)
    },
    handlePreview(file) {
      debugger
      console.log(file)
    },
    uploadError(e) {
      debugger
      console.log(e)
    },
    quillImgSuccess(res, fileList) {
      debugger
      console.log(res, fileList)
    },
    //
    async testDeleteAjax() {
      const params = {
        aa: 'dd',
        bb: ['dd', 'df']
      }
      const res = await testDeleteAjax(params)
      this.text = res
    }
  }
}
</script>
